<template>
	<view>
		<view class="uni-header">
			<view class="uni-group hide-on-phone">
				<!-- <view class="uni-title">{{$t('demo.table.title')}}</view> -->
				<view class="uni-title">中币管理</view>
			</view>
			<view class="uni-group">
				<!-- 输入框 -->
				<input class="uni-search" type="text" v-model="searchVal" @confirm="search"
					:placeholder="$t('common.placeholder.query')" />
				<!-- 搜索按钮 -->
				<button class="uni-button" type="default" size="mini"
					@click="search">{{$t('common.button.search')}}</button>
				<!-- 添加按钮 -->
				<!-- <button class="uni-button" type="primary" size="mini"
					@click="add()">{{$t('common.button.add')}}</button> -->
				<!-- 批量删除按钮 -->
				<!-- <button class="uni-button" type="warn" size="mini"
					@click="delTable">{{$t('common.button.batchDelete')}}</button> -->
			</view>
		</view>
		<view class="uni-container">
			<!-- 表格组件 -->
			<uni-table :loading="loading" border stripe type="selection" :emptyText="$t('common.empty')"
				@selection-change="selectionChange">
				<uni-tr>
					<!-- 表头列  width="150" width="60" width="80" width="204"-->
					<uni-th align="center" width="150">用户</uni-th>
					<uni-th align="center" width="150">请求类型</uni-th>
					<uni-th align="center" width="150">请求模型</uni-th>
					<uni-th align="center" width="150">ai消耗</uni-th>
					<uni-th align="center" width="150">aiId</uni-th>
					<uni-th align="center" width="200">操作时间</uni-th>
				</uni-tr>
				<uni-tr v-for="(item ,index) in tableData" :key="index">
					<!-- 表格数据列 -->
					<uni-td>{{item.userinfo[0].username}}</uni-td>
					<uni-td>{{$taskType(item.type)}}</uni-td>
					<uni-td>{{item.model}}</uni-td>
					<uni-td>{{item.value}}</uni-td>
					<uni-td><el-link type="primary" @click="getAis(item)">{{item.ai}}</el-link></uni-td>
					<uni-td><uni-dateformat :date="item.createdAt"></uni-dateformat></uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<!-- 分页组件 -->
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
			<el-dialog v-model="dialogTableVisible" title="" width="800">
				<el-descriptions :title="'用户名：'+username" border :column="2">
					<el-descriptions-item label="Ai类型">{{$taskType(details.results[0].type)}}</el-descriptions-item>
					<el-descriptions-item label="Ai模型">{{model}}</el-descriptions-item>
					<el-descriptions-item :label="'内  容'" :span="2" min-width="80"><el-text
							type="info">{{details.results[0].content}}</el-text></el-descriptions-item>
					<el-descriptions-item :span="2" v-if="details.results[0].url && isJPGURL(details.results[0].url)"
						label="图片"><el-image loading lazy
							:src="details.results[0].url"></el-image></el-descriptions-item>
					<el-descriptions-item :span="2" v-if="details.results[0].url && !isJPGURL(details.results[0].url)  "
						label="音乐"><video :src="details.results[0].url" controls></video></el-descriptions-item>
					<el-descriptions-item v-if="details.results[0].usage" label="消耗金额"><el-text
							type="info">{{details.results[0].usage}}</el-text></el-descriptions-item>
					<el-descriptions-item v-if="details.createdAt" label="操作时间">
						<uni-dateformat :date="details.createdAt"></uni-dateformat></el-descriptions-item>
				</el-descriptions>
				<template #footer>
					<div class="dialog-footer">
						<el-button @click="dialogTableVisible = false">{{$t('common.button.cancel')}}</el-button>
						<!-- <el-button type="primary" @click="submit('edit')">
							{{$t('common.button.submit')}}
						</el-button> -->
					</div>
				</template>
			</el-dialog>
		</view>
		<!-- #ifndef H5 -->
		<fix-window />
		<!-- #endif -->
	</view>
</template>


<script>
	import {
		getRecordsList,
		getOperateList,
		getAiList,
		getAiDetails
	} from '@/api/pc';
	import {
		Check,
		Close
	} from '@element-plus/icons-vue'
	// 导出默认模块
	export default {
		// 数据属性
		data() {
			return {
				// 搜索值
				searchVal: '',
				// 表格数据
				tableData: [],
				// 每页数据量
				pageSize: 15,
				// 当前页
				pageCurrent: 1,
				// 数据总量
				total: 0,
				// 加载状态
				loading: false,
				// ------- 新 ---------
				dialogTableVisible: false,
				balance: 0,
				username: '',
				model: '',
				details: {}
			}
		},
		// 页面加载时的处理函数
		onLoad() {
			// 重置选中项数组
			this.selectedIndexs = []
			// 获取第一页数据
			this.getData(1)
		},
		// 方法
		methods: {
			// 多选处理
			selectedItems() {
				return this.selectedIndexs.map(i => this.tableData[i])
			},

			// 多选事件处理函数
			selectionChange(e) {
				this.selectedIndexs = e.detail.index
			},

			// 批量删除函数
			delTable() {
				this.selectedItems();
			},

			// 分页触发事件处理函数
			change(e) {
				this.getData(e.current, this.searchVal)
			},
			// 搜索函数
			search() {
				this.getData(1, this.searchVal)
			},
			isMP3URL(url) {
				return url.toLowerCase().endsWith('.mp3');
			},
			isJPGURL(url) {
				var image = url.toLowerCase();
				return image.endsWith('.png') || image.endsWith('.jpg') || image.endsWith('.jpeg') || image.endsWith(
					'.gif') || image.endsWith('.webp');
			},
			getAis(e) {
				getAiDetails(e.ai, {
					type: e.type,
					model: e.model
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.details = res.data
						this.username = e.userinfo[0].username;
						this.model = e.model;
						this.dialogTableVisible = true;
					} else {
						this.$message.error(res.msg || '登录失败');
					}
				})
			},
			// 获取数据函数
			getData(pageCurrent, key = "") {
				this.loading = true
				this.pageCurrent = pageCurrent
				getAiList({
					pageSize: this.pageSize,
					pageCurrent: pageCurrent,
					key: key,
				}).then(res => {
					// console.log(res);
					if (res.code == 200) {
						this.tableData = res.data
						this.total = res.total
						this.loading = false
					} else {
						this.$message.error(res.msg || '登录失败');
						this.tableData = []
						this.total = 0
						this.loading = false
					}
				})
			},
			// 伪request请求函数
			request(options) {
				console.log(options);
				const {
					pageSize,
					pageCurrent,
					success,
					value
				} = options

				let total = tableData.length

				let data = tableData.filter((item, index) => {
					const idx = index - (pageCurrent - 1) * pageSize
					return idx < pageSize && idx >= 0
				})

				if (value) {
					data = []
					tableData.forEach(item => {
						if (item.name.indexOf(value) !== -1) {
							data.push(item)
						}
					})
					total = data.length
				}

				setTimeout(() => {
					typeof success === 'function' && success({
						data: data,
						total: total
					})
				}, 500)
			}
		}
	}
</script>


<style>
	/* #ifndef H5 */
	page {
		padding-top: 85px;
	}

	.uni-title_num {
		font-weight: bold;
	}

	/* #endif */
</style>